<script>
import {defineComponent, nextTick, onMounted, ref} from 'vue';
import '../../utils/gVerify.js';
import axios from "axios";
import router from "@/router";
import store from "@/stores/store";
import account from "@/stores/account";

export default defineComponent({
		name: "login",
		setup(){
			let verifyCode = ref(null);
			onMounted(()=>{
					nextTick(()=>{
						verifyCode.value = new GVerify('v_container');
					})
			})
			return{
				verifyCode
			}
		},
		methods : {
        /**
         * @Param:username
         * @Param:password
         * */
				login_axios(username,password){
						return axios({
								url:'http://localhost:8080/users',
								method:'GET',
								withCredentials: true,
								params:{
										userid:username,
										password:password
								}
						})
				},
				// 完成验证码校验，并实现登录跳转
				 login(e){
						e.preventDefault();
						let res = this.verifyCode.validate(document.getElementById('captcha').value)
						if (res){
							alert("验证成功")
							// 异步操作实现
							const promise = this.login_axios(this.username,this.password)
							promise.then(
									response => {
										if(response.data.status === 0){
                      // TODO:实现用户信息保存到store(Vuex状态管理)当中
                      const res = response.data
                      const user = new account(
                          res.data.userid,res.data.email,res.data.firstname,
                          res.data.lastname,res.data.status,res.data.addr1,
                          res.data.addr2,res.data.city,res.data.state,
                          res.data.zip,res.data.country,res.data.phone
                      )

                      // 异步操作捏
                      store.dispatch("login",user)
                          .then(()=>{
                            router.push('/index')
                          })
                          .catch((error)=>{
                            console.error('异常',error)
                          })
                    } else {
                      alert('用户名或密码错误')
                      router.replace({
                        path : '/login',
                        query : {
                          error : "用户名或密码错误"
                        }
                      })
                      location.reload();
                    }
									}
							).catch(
									error => {
										console.log(error)
									}
							)
						} else {
							alert("验证码错误")
							location.reload()
						}
				}
		},
		data(){
			return {
				username:"",
				password:"",
				captcha:""
			}
		}
})
</script>

<template>
		<div class="wrapper">
				<div class="container main">
						<div class="row">
								<div class="col-md-6 side-image">
										<img src="@/assets/login/dog.png" alt="" >
										<div class="text">
												<p>Join the community of PetStore <i>- Nagisa</i></p>
										</div>
								</div>
								<div class="col-md-6 right">
										<div class="input-box">
												<header>Login Account</header>
												<div class="input-field">
														<input type="text" class="input" id="username" v-model="username" required autocomplete="off">
														<label for="username">Username</label>
												</div>
												<div class="input-field">
														<input type="password" class="input" id="password" v-model="password" required>
														<label for="password">Password</label>
												</div>
												<div class="captcha-input-field">
														<input type="text" class="captcha-input" id="captcha" v-model="captcha" required>
														<label for="captcha">Captcha</label>
														<div id="v_container"></div>
												</div>
												<div class="input-field">
														<input type="submit" class="submit" value="Log In" @click="login">
												</div>
												<div class="signUp">
														<span>Don't have an account?<router-link to="/register">Sign up!</router-link></span>
												</div>
										</div>
								</div>
						</div>
				</div>
		</div>
</template>

<style scoped>
*{
		font-family: 'Poppins', sans-serif;
}
.wrapper{
		background: #ececec;
		padding: 0 20px 0 20px;
}
.main{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
}
.row{
		width: 900px;
		height: 550px;
		border-radius: 10px;
		background: #fff;
		box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
}
.side-image{
		background-image: url("@/assets/login/bg.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		border-radius: 10px 0 0 10px;
}
img{
		width: 35px;
		position: absolute;
		top: 30px;
		left: 30px;
}
.text{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
}
.text p{
		color: #fff;
		font-size: 18px;
}
i{
		font-weight: 400;
		font-size: 15px;	
}
.right{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;	
}
.input-box{
		width: 330px;
		box-sizing: border-box;
}
.input-box header{
		font-weight: 700;
		text-align: center;
		margin-bottom: 45px;
}
.input-field{
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 0 10px 0 10px;
}
.captcha-input-field{
		display: flex;
		padding: 0 10px;
		position: relative;
		align-items: center;
		justify-content: space-between;
}
.input{
		height: 45px;
    line-height: 45px;
		width: 100%;
		background: transparent;
		border: none;
		border-bottom: 1px solid rgba(0,0,0,0.2);
		outline: none;
		margin-bottom: 20px;
		color: #40414a;
}
.captcha-input{
	height: 45px;
	width: 70%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	outline: none;
	margin-bottom: 20px;
	color: #40414a;
}
#v_container{
		margin-left: 10px;
		flex: 1;
}
.input-box .input-field label,
.input-box .captcha-input-field label{
		position: absolute;
		top: 10px;
		left: 10px;
		pointer-events: none;
		transition: .5s;
}
.input-field .input:focus ~ label,
.captcha-input-field .captcha-input:focus ~ label{
		top: -10px;
		font-size: 13px;
}
.input-field .input:valid ~ label,
.captcha-input-field .captcha-input:valid ~label{
		top: -10px;
		font-size: 13px;
		color: #5d5076;
}
.input-field .input:focus,
.input-field .input:valid,
.captcha-input-field .captcha-input:focus,
.captcha-input-field .captcha-input:valid{
		border-bottom: 1px solid #743ae1;
}
.submit{
		border: none;
		outline: none;
		height: 45px;
		background: #ececec;
		border-radius: 5px;
		transition: .4s;
}
.submit:hover{
		background: rgba(37, 95, 156,0.9);
		color: #fff;
}
.signUp{
		text-align: center;
		font-size: small;
		margin-top: 25px;
}
span a{
		text-decoration: none;
		font-weight: 700;
		color: #000;
		transition: .5s;
}
span a:hover{
		text-decoration: underline;
		color: #000;
}
@media only screen and (max-width: 768px){
		.side-image{
				border-radius: 10px 10px 0 0;
		}
		img{
				width: 35px;
				position: absolute;
				top: 20px;
				left: 47%;
		}
		.text{
				position: absolute;
				top: 80%;
				text-align: center;
		}
		.text p,i{
				font-size: 17px;
		}
		.row{
				max-width: 420px;
				width: 100%;
		}
}
</style>